<div class="modal" ng-controller="SaveModelCtrl">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2>{{'MODEL.SAVE.TITLE' | translate}}</h2>
      </div>
      <div class="modal-body">
        <div class="alert error" ng-if="saveDialog.errorMessage && saveDialog.errorMessage.length > 0"
             style="font-size: 14px; margin-top:20px">
          <div class="popup-error" style="font-size: 14px">
            <span class="glyphicon glyphicon-remove-circle"></span>
            <span>{{saveDialog.errorMessage}}</span>
          </div>
        </div>
        <div class="form-group">
          <label for="nameField">{{'MODEL.NAME' | translate}}</label>
          <input auto-focus
                 class="form-control"
                 id="nameField"
                 ng-disabled="status.loading || (error && error.conflictResolveAction == 'saveAs')"
                 ng-model="saveDialog.name"
                 type="text"/>
        </div>
        <div class="form-group">
          <label for="keyField">{{'MODEL.KEY' | translate}}</label>
          <input class="form-control"
                 id="keyField"
                 ng-disabled="status.loading || (error && error.conflictResolveAction == 'saveAs')"
                 ng-model="saveDialog.key"
                 type="text"/>
        </div>
        <div class="form-group">
          <label for="docTextArea">{{'MODEL.DESCRIPTION' | translate}}</label>
          <textarea class="form-control" id="docTextArea" ng-disabled="status.loading"
                    ng-model="saveDialog.description"></textarea>
        </div>
        <div class="checkbox" ng-show="!error && !error.isConflict">
          <label>
            <input ng-disabled="status.loading" ng-model="saveDialog.newVersion" type="checkbox">
            {{'MODEL.SAVE.NEWVERSION' | translate}}
          </label>
        </div>
        <div class="form-group" ng-if="saveDialog.newVersion">
          <label for="commentTextArea">{{'MODEL.SAVE.COMMENT' | translate}}</label>
          <textarea class="form-control" id="commentTextArea" ng-disabled="status.loading"
                    ng-model="saveDialog.comment"></textarea>
        </div>

        <div class="alert error" ng-if="saveDialog.validationErrors" style="font-size: 14px; margin-top:20px">

          <div class="popup-error" style="font-size: 14px">
            <span class="glyphicon glyphicon-remove-circle"></span>
            <span>{{'MODEL.VALIDATIONERRORS' | translate:error}}</span>
          </div>
        </div>

        <div class="alert error" ng-if="error && error.isConflict && !status.loading"
             style="font-size: 14px; margin-top:20px">

          <div class="popup-error" style="font-size: 14px">
            <span class="glyphicon glyphicon-remove-circle"></span>
            <span>{{'MODEL.CONFLICT.WRITE' | translate:error}}</span>
          </div>

          <div>

            <div style="font-size: 14px; margin-bottom: 10px">{{'MODEL.CONFLICT.WRITE.OPTIONS' | translate}}</div>
            <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-danger"
                     ng-click="error.conflictResolveAction = 'overwrite'">
                <input id="option1" name="options" type="radio">
                {{'MODEL.CONFLICT.WRITE.OPTION.OVERWRITE' | translate}}
              </label>
              <label class="btn btn-danger"
                     ng-click="error.conflictResolveAction = 'discardChanges'">
                <input id="option2" name="options" type="radio">
                {{'MODEL.CONFLICT.WRITE.OPTION.DISCARDCHANGES' | translate}}
              </label>
              <label class="btn btn-danger"
                     ng-click="error.conflictResolveAction = 'saveAs'">
                <input id="option3" name="options" ng-disabled="account.type != 'enterprise'" type="radio">
                {{'MODEL.CONFLICT.WRITE.OPTION.SAVEAS' | translate}}
              </label>
              <label class="btn btn-danger"
                     ng-click="error.conflictResolveAction = 'newVersion'">
                <input id="optio43" name="options" type="radio">
                {{'MODEL.CONFLICT.WRITE.OPTION.NEWVERSION' | translate}}
              </label>
            </div>

            <div ng-if="error.conflictResolveAction == 'saveAs'" style="margin-top: 10px">
              <span>{{'MODEL.CONFLICT.SAVEAS' | translate}}</span>
              <input auto-focus ng-model="error.saveAs" style="width: 300px" type="text">
            </div>
          </div>

        </div>

      </div>
      <div class="modal-footer">

        <div class="pull-right">
          <button class="btn" ng-click="close()" ng-disabled="status.loading" translate type="button">ACTION.CANCEL
          </button>
          <button class="btn btn-primary" ng-click="saveAndClose()"
                  ng-disabled="status.loading || saveDialog.name.length == 0 || saveDialog.key.length == 0"
                  ng-show="!error && !error.isConflict" translate>ACTION.SAVE-AND-CLOSE
          </button>
          <button class="btn btn-primary" ng-click="save()"
                  ng-disabled="status.loading || saveDialog.name.length == 0 || saveDialog.key.length == 0"
                  ng-show="!error && !error.isConflict" translate>ACTION.SAVE
          </button>
          <button class="btn btn-primary" ng-click="okClicked()" ng-disabled="isOkButtonDisabled()"
                  ng-show="error && error.isConflict" translate>ACTION.OK
          </button>
        </div>

        <div class="pull-right popup-error" ng-if="error && !error.isConflict">
          <span>{{'MODEL.SAVE.ERROR' | translate}}</span>
        </div>

        <loading></loading>

      </div>
    </div>
  </div>
